<template>
	<view v-if="list && list.length > 0" class="cu-card article" :class="props.isCard ? 'no-card' : ''">
		<view v-for="(item, index) in list" :key="index" :data-index="index" :data-value="item" @click="handleSelect" class="cu-item shadow">
			<view class="content">
				<view class="content-text">
					<view class="title">
						<view class="text-cut">{{ item.title }}</view>
					</view>
					<view class="padding-xs flex align-center">
						<image class="image_20" src="../../static/logo.jpg"></image>
						<text class="margin-left-sm text-size-14">{{ item.accountName }}</text>
						<text class="margin-left-sm cu-tag bg-blue light  round">{{ item.type == 0 ? '论文' : '问答' }}</text>
						<text v-if="item.price>0" class="margin-left-sm cu-tag bg-orange light  round">￥{{ item.price}}</text>
					</view>
					<view class="desc">
						<view class="text-content">{{item.description}}</view>
						
					</view>
				</view>
				<image :src="item.coverUrl" mode="aspectFill"></image>
			</view>
			<view>
				<view class="cu-tag bg-red light sm round">{{item.readNum}}人浏览</view>
				<view class="cu-tag bg-green light sm round">{{item.praiseNum}}人评论</view>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
import { useSettingStore } from '@/stores/index';
const setting = useSettingStore();
const emit = defineEmits(['action']);
const props = defineProps({
	isCard: {
		type: [Boolean, String],
		default: false
	},
	list: Array
});
const handleSelect = (e: any) => {
	emit('action', e.currentTarget.dataset.value);
};
</script>

<style lang="scss">
.card-content {
	border: 1px solid #efefef;
	border-radius: 10rpx;
	background-color: #ffffff;
}
.content-text {
	width: calc(100% - 100px);
	.title{
		.text-cut{
			font-size: 14px;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 800;
			color: #333333;
			line-height: 20px;
			letter-spacing: 1px;
		}
		
	}
}
.cu-card.article>.cu-item .title {
    font-size: 30rpx;
    font-weight: 900;
    color: #333333;
    line-height: 100rpx;
    padding: 0rpx;
}
.cu-card.article > .cu-item .content {
	display: flex;
	padding: 0rpx;
}
.cu-card.article > .cu-item .content > image {
	width: 200rpx;
	margin-left: 20rpx;
	border-radius: 6rpx;
}
.cu-card.article>.cu-item {
    padding-bottom: 20rpx;
}
</style>
